<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/tool.css"/>
		<style type="text/css">
			.box-container{
				position: relative;
				display: flex;
			}
			.smallBox{
				position: relative;
				width: 300px;
				height: 188px;
			}
			.smallBox img{
				width: 100%;
			}
			.maskBox{
				position: absolute;
				left: 0;
				top: 0;
				width: 50px;
				height: 50px;
				background: rgba(128,1238,128,.3);
			}
			
			
			.bigBox{
				position: relative;
				display: none;
				width: 600px;
				height: 400px;
				overflow: hidden;
			}
			
			.bigImg{
				position: absolute;
			}
			
			
		</style>
	</head>
	<body>
		<div class="box-container">
			<div class="smallBox">
				<img src="img/1.jpg"/>
				<div class="maskBox"></div>
			</div>
			<div class="bigBox">
				<img src="img/1.jpg" class="bigImg"/>
			</div>
			
		</div>

		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function(){
				
				$(".smallBox").mousemove(function(event){
					$(".bigBox").show(200)
					
					
					$(".maskBox").stop().animate({
						left:event.pageX - $(".maskBox").width() / 2,
						top:event.pageY - $(".maskBox").height() / 2
					},0)
					
					
					$(".maskBox").position().left >= $(".smallBox").width() - $(".maskBox").width() ? $(".maskBox").css({left:$(".smallBox").width() - $(".maskBox").width()}) : null
					$(".maskBox").position().top >= $(".smallBox").height() - $(".maskBox").height() ? $(".maskBox").css({top:$(".smallBox").height() - $(".maskBox").height()}) : null
					$(".maskBox").position().left <= 0 ? $(".maskBox").css({left:0}) : null
					$(".maskBox").position().top <= 0 ? $(".maskBox").css({top:0}) : null
					
					$(".bigImg").stop().animate({
						left:($(".bigBox").width() - $(".bigImg").width()) * $(".maskBox").position().left / ($(".smallBox").width() - $(".maskBox").width()),
						top:($(".bigBox").height() - $(".bigImg").height()) * $(".maskBox").position().top / ($(".smallBox").height() - $(".maskBox").height())
					},0)
					
					
//					console.log($(".bigImg").position().left)
					
				})
				
				$(".smallBox").mouseleave(function(){
					$(".bigBox").hide()
				})
				
			})
			
			
			
			
			
			
			
		</script>
		
	</body>
</html>
